<!-- 设置动态列 -->
<template>
  <div class="setDynamics">
    <div class="colModules">
      <div class="modulesTitle">固定字段</div>
      <div class="checkboxCols">
        <el-row type="flex">
          <el-checkbox-group v-model="fixedCheckList" :indeterminate="true">
            <el-col v-for="item in fixedCheckOption" :key="item.prop" :span="6">
              <el-checkbox disabled :label="item.prop">{{ item.label }}</el-checkbox>
            </el-col>
          </el-checkbox-group>
        </el-row>
      </div>
    </div>
    <div class="colModules">
      <div class="modulesTitle">自定义字段</div>
      <div class="checkboxCols">
        <el-row type="flex">
          <el-checkbox-group v-model="customCheckList">
            <el-col v-for="item in customCheckOption" :key="item.prop" :span="spanClo">
              <el-checkbox :label="item.prop">{{ item.label }}</el-checkbox>
            </el-col>
          </el-checkbox-group>
        </el-row>
      </div>
    </div>
    <div class="colModules">
      <div class="modulesRemark">说明：选中数据项后自动添加至下方并按选中的先后顺序默认排序</div>
      <div class="checkboxCols showCheckbox">
        {{ checkboxValue | customCheck }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
    name: 'SetDynamics',
    filters: {
        // 展示选中字段
        customCheck(data) {
            if (!data.length) {
              return ''
            }else{
              const list = data.map((item) => item.label)
            const customCheck = list.join().replaceAll(',', '、')
            return customCheck
            }
           
        }
    },
    props: {
        // 固定字段
        fixedCheckOption: {
            type: Array,
            default: () => []
        },
        // 自定义字段
        customCheckOption: {
            type: Array,
            default: () => []
        },
        // 自定义字段列宽
        spanClo: {
            type: Number,
            default: 6
        }
        // 自定义
    },
    data() {
        return {
            fixedCheckList: [], // 固定字段选中值
            customCheckList: [] // 自定义选中值
        }
    },
    computed: {
        checkboxValue() {
            const list = []
            this.customCheckOption.forEach((item) => {
                this.customCheckList.forEach((it) => {
                    if (item.prop === it) {
                        list.push(item)
                    }
                })
            })
            return list
        }
    },
    watch: {
        // 固定选中字段
        fixedCheckOption: {
            handler(newVal) {
                this.fixedCheckList = newVal.map((item) => item.prop)
            },
            immediate: true,
            deep: true
        }
    }
}
</script>

<style lang="scss" scoped>
.setDynamics {
    margin: 10px 40px 20px;
    max-height: 440px;

    .colModules {
        margin-top: 10px;

        .modulesTitle {
            margin-left: 4px;
            font-size: 14px;
            color: #444;
            font-weight: 550;
        }

        .modulesRemark {
            font-size: 13px;
            color: #D9001B;
        }

        .checkboxCols {
            margin-top: 10px;
            width: 100%;
            min-height: 50px;
            height: auto;
            background-color: #f2f2f2;
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
        }

        .showCheckbox {
            color: #111;
            line-height: 40px;
        }
    }
}

::v-deep .el-checkbox__label {
    color: #111;
    line-height: 40px;
}

::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
    border-color: #fff;
}

::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
    background-color: #EB4B4B;
    border-color: #EB4B4B;
}

::v-deep .el-checkbox__input.is-disabled+span.el-checkbox__label {
    color: #333;
}</style>
